<template>
	<view class="popup-container" v-if="visible">
		<view class="popup-mask" @tap="closePopup"></view>
		<view class="popup-content">
			<!-- 关闭按钮 -->
			<view class="close-btn" @tap="closePopup">
				<text class="close-icon">×</text>
			</view>

			<!-- 顶部标题和熊猫图标 -->
			<view class="header">
				<view class="title-container">
					<text class="title-text">找搭子<text class="title-small">来</text>{{ globalConfig.name }}</text>
					<view class="title-underline"></view>
				</view>
				<image class="panda-image" src="/static/images/panda.png" mode="aspectFit"></image>
			</view>

			<!-- 分类选项 -->
			<view class="category-grid">
				<view class="category-item" v-for="(item, index) in categories" :key="index"
					@tap="selectCategory(item)">
					<view class="category-content">
						<text class="category-title">{{ item.title }}</text>
						<view class="category-link">
							<text class="link-text">找搭子</text>
							<text class="link-arrow">></text>
						</view>
					</view>
					<image class="category-icon" :src="item.icon" mode="aspectFit"></image>
				</view>
			</view>

			<!-- 发起活动按钮 -->
			<view class="activity-button" @tap="initiateActivity">
				<view class="activity-icon">≡</view>
				<text class="activity-text">发起活动</text>
			</view>

			<view class="activity-link" @tap="customActivity">
				<text class="custom-activity-text">发起属于你的定制活动</text>
				<text class="custom-activity-arrow">></text>
			</view>

			<!-- 底部导航栏 -->
			<view class="bottom-nav">
				<view class="nav-item" v-for="(item, index) in navItems" :key="index" @tap="navigate(item)">
					<text class="nav-icon">{{ item.icon }}</text>
					<text class="nav-text">{{ item.title }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ActivityPopup',
		props: {
			visible: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				categories: [{
						title: 'KTV',
						icon: '/static/images/ktv-icon.png',
						id: 'ktv'
					},
					{
						title: '台球',
						icon: '/static/images/billiards-icon.png',
						id: 'billiards'
					},
					{
						title: '其他',
						icon: '/static/images/other-icon.png',
						id: 'other'
					},
					{
						title: '影吧',
						icon: '/static/images/movie-icon.png',
						id: 'movie'
					}
				],
				navItems: [{
						title: '首页',
						icon: '🏠',
						id: 'home'
					},
					{
						title: '我要点歌',
						icon: '🎤',
						id: 'sing'
					},
					{
						title: '我的订单',
						icon: '🛒',
						id: 'orders'
					},
					{
						title: '个人中心',
						icon: '👤',
						id: 'profile'
					}
				]
			};
		},
		methods: {
			closePopup() {
				this.$emit('close');
			},
			selectCategory(category) {
				this.$emit('select-category', category);
			},
			initiateActivity() {
				this.$emit('initiate-activity');
			},
			customActivity() {
				this.$emit('initiate-activity', {
					custom: true
				});
			},
			navigate(item) {
				this.$emit('navigate', item);
			}
		}
	}
</script>

<style>
	.popup-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
	}

	.popup-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.popup-content {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		padding-bottom: 30rpx;
		overflow: hidden;
	}

	.close-btn {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}

	.close-icon {
		font-size: 48rpx;
		color: #333;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 40rpx;
		background-color: #f5f5f5;
		border-bottom: 2rpx solid #eaeaea;
	}

	.title-container {
		display: flex;
		flex-direction: column;
	}

	.title-text {
		font-size: 40rpx;
		font-weight: bold;
		color: #4169E1;
	}

	.title-small {
		font-size: 32rpx;
	}

	.title-underline {
		width: 180rpx;
		height: 6rpx;
		background-color: #4169E1;
		margin-top: 8rpx;
	}

	.panda-image {
		width: 120rpx;
		height: 120rpx;
	}

	.category-grid {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx;
	}

	.category-item {
		width: 50%;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.category-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-color: #f9f9f9;
		border-radius: 16rpx;
		padding: 30rpx;
		height: 180rpx;
		position: relative;
	}

	.category-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.category-link {
		display: flex;
		align-items: center;
	}

	.link-text {
		font-size: 28rpx;
		color: #4169E1;
	}

	.link-arrow {
		font-size: 28rpx;
		color: #4169E1;
		margin-left: 4rpx;
	}

	.category-icon {
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
		width: 80rpx;
		height: 80rpx;
	}

	.activity-button {
		margin: 20rpx 40rpx;
		background-color: #f9f9f9;
		border-radius: 16rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;
	}

	.activity-icon {
		font-size: 40rpx;
		color: #666;
		margin-right: 20rpx;
	}

	.activity-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.activity-link {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
	}

	.custom-activity-text {
		font-size: 28rpx;
		color: #4169E1;
	}

	.custom-activity-arrow {
		font-size: 28rpx;
		color: #4169E1;
		margin-left: 4rpx;
	}

	.bottom-nav {
		display: flex;
		justify-content: space-around;
		border-top: 2rpx solid #eaeaea;
		padding-top: 20rpx;
	}

	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.nav-icon {
		font-size: 48rpx;
		margin-bottom: 8rpx;
	}

	.nav-text {
		font-size: 24rpx;
		color: #666;
	}
</style>